<template>
	<view>
		<!-- <u-navbar :is-back='false' :border-bottom='false' title='积分明细' title-color='#ffffff' :is-fixed='true'
			:background='background'>
			<view class="slot-wrap">
				<view @click="back"
					style="border-radius: 50%;width: 50rpx;height: 50rpx;background-color:rgba(0,0,0,.2);position: relative;">
					<text class="iconfont icon-xiangzuo"
						style="font-size: 40rpx;color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></text>
				</view>
		
			</view>
		</u-navbar> -->
		<view style="width: 750rpx;height: 366rpx;background: linear-gradient(180deg, #1fb0ac 0%, #F5F5F5 100%);position: relative;">
			<view class="" style="padding-top: 50rpx;width: 92%;margin: 0 auto;text-align: center;line-height: 100rpx;">
				<view class="">
					<text style="color: #FFFFFF;font-size: 72rpx;">{{score || 0}}</text>
					<text style="color: #FFFFFF;font-size: 30rpx;">积分</text>
				</view>
				<view style="line-height: 80rpx;text-align: center;display: flex;">
					<view @click="xuan(0)" style="flex: 1;position: relative;" >
						<view :class="index==0?'act':'at'">
							全部
						</view>
					</view>
					<view @click="xuan(1)" style="flex: 1;position: relative;" >
						<view :class="index==1?'act':'at'">
							获取
						</view>
					</view>
					<view @click="xuan(2)" style="flex: 1;position: relative;">
						<view :class="index==2?'act':'at'">
							消费
						</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in list" :key='index' style="overflow: hidden;border-bottom: 1px solid #eeeeee;width: 90%;margin: 20rpx auto;">
					<view style="width: 40%;float: left;line-height: 120rpx;font-size: 32rpx;color: #000000;text-align: left;" class="yihang">
						{{item.memo}}
					</view>
					<view style="width: 60%;float: left;line-height: 120rpx;font-size: 32rpx;color: #000000;text-align: right;">
						<view style="font-size: 26rpx;opacity: 0.5;line-height: 60rpx;">
							{{item.createtime}}
						</view>
						<view style="font-size: 26rpx;opacity: 0.5;line-height: 60rpx;">
							<text v-if="item.change_type==1">+</text>
							<text v-if="item.change_type==2">-</text>
							{{item.score}}积分
						</view>
					</view>
				</view>
				<view v-if="kk" style="text-align: center;margin: 20rpx auto;">
					<image src="https://qiniuoss.yjqwl.cn/uploads/20211111/FljQNmzWmi-mO8CGX0Zy28Cc-QdS.png" style="width: 690rpx" mode="widthFix"></image>
				</view>
				
				<view v-if="enmpy && list.length!=0" style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 60rpx;width: 490rpx;margin: 20rpx auto;">
					已经到底了！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					background: 'linear-gradient(180deg, #0078FF 0%, #1fb0ac 100%)'
				},
				index:0,
				page: 1,
				kk:false,
				enmpy: false,
				list:[],
				score:''
			}
		},
		onLoad() {
			this.user_xx()
			this.yang()
		},
		onPullDownRefresh() {
			this.user_xx()
			this.yang()
		       setTimeout(function () {
		           uni.stopPullDownRefresh();
		       }, 1500);
		  },
		onShow() {
			this.page= 1
			this.kk=false
			this.enmpy= false
			this.list=[]
			this.jifen()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.jifen()
			}
		},
		methods:{
			// 增加访问量
			yang:function(){
				this.post('api/homepage/pageviews',{path:'/pages/my/jfmx'},true).then(res=>{
					console.log(res)
				})
			},
			user_xx:function(){
				this.post('api/client/info','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.score=res.data.score
					}
				})
			},
			back:function(){
				uni.navigateBack({
					delta:1
				})
			},
			xuan:function(index){
				this.index=index
				this.page= 1
				this.kk=false
				this.enmpy= false
				this.list=[]
				this.jifen()
			},
			jifen:function(){
				this.post('api/user_center/score',{change_type:this.index,page:this.page},true).then(res=>{
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}
						
						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.act{
		color: #000000;
		font-size: 28rpx;
	}
	.act:after{
		content: '';
		width: 80rpx;
		height: 4rpx;
		background-color: #1fb0ac;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}
	.at{
		color: #666666;
		font-size: 28rpx;
	}
	page {
		background-color: #f5f5f5 !important;
		font-family: Demibold;
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}
</style>
